Vibe Coding With Copilot

⏱️ Do It Now

Create a OneNote Page and copy this into the title:

Lesson 4 - Spring 2 - Vibe Coding


Complete this and screenshot it into OneNote

🎯 Learning Objectives

  • LO1:Be able to explain the concept of Vibe Coding
  • LO2:Be able to create a JavaScript App through Vibe Coding
  • LO3:Be able to evaluate the long term impact of Vibe Coding

⌨️ Setting Up For Today

Click this link: VSCODEEDU.COM

  • Sign In with your Microsoft Account
  • Create a HTML5 Project Website and call it Y9 - SP2.4 - Vibe Coding
  • Rename index.html as Version 1.html

Copy the table below into OneNote

Share your project and paste the link into the table

📝 Link To My Project

Paste a link to your project Y9 - SP2.4 - Vibe Coding below:

🤖 What is Vibe Coding (AI)?

Vibe coding with AI means using AI tools to generate and modify code based on intuition and experimentation.

Instead of fully planning or understanding everything, you:

  • Try things out
  • Adjust as you go
  • Follow what “feels right”

💻 What it looks like

  • Ask AI to generate code
  • Copy it into your project
  • Run it
  • If it breaks → tweak your prompt or code
  • Repeat until it works 🎉

This is driven by:

  • Trial and error
  • “That looks about right” thinking
  • Small adjustments

🎮 Analogy

Think of it like using cheats or mods in a game:

  • Traditional coding = building everything from scratch
  • AI vibe coding = asking for tools and swapping them until it works

You’re still creating something — just not building every part yourself.

🔁 The Vibe Coding Loop

  1. “I want a program that does X”
  2. Ask AI for code
  3. Run it
  4. Something is wrong
  5. Ask AI to fix or change it
  6. Try again

Repeat until success 🎉

👍 Why it’s powerful

  • Faster to get started
  • Build complex things quickly
  • Encourages experimentation
  • Feels like problem-solving, not memorising

⚠️ The risks

  • You might not understand the code
  • Hard to debug problems
  • Code can be inefficient or insecure
  • Over-reliance on AI weakens skills

💭🤔How to Vibe Code (1)

Vibe coding runs by trial and error:


(Stage 1) Coming up with the initial idea

  • You think of an idea
  • You ask Copilot to build it
  • It gives you the code
Click to see the initial prompt 
Build me a single file HTML / Javascript app that makes rainbow coloured balls float around the screen

💭🤔How to Vibe Code (2)


(Stage 2) Reviewing and making changes

  • Copy and paste the code into VSCODE
  • Run it to assess how good it is
  • Think of what you would change
  • Prompt Copilot to make the changes and
  • Give you back the full file WITH THE CHANGES
Click to see the second prompt 
I like this so far. Now, can you now make it so when I click on one of the balls it pops and then disappears. Give the app a timer so I have to click on as many of the balls as possible. When I have clicked all of the balls the game will end and I will be presented with my time.
Can you give me the full file back with these changes made to it?

💭🤔How to Vibe Code (3)

There really isn't much of a stage 3...

You just keep running each update of the code and asking for more changes

If anything goes wrong with it, copy and paste an earlier (working) version of the code
from the chat and ask Copilot to make the changes again but to this code!

Evidence of your prompting

Copy this table into OneNote

📝 My Prompts

Print screen each prompt you give to Copilot into this box

⚖️ The Balanced View

AI vibe coding is a tool, not a replacement for thinking.

Good programmers:

  • Use AI for ideas and starting points
  • Read and test the code
  • Understand what each part does

🧠 Key Takeaway

AI can help you code faster, but if you don’t understand it, you’re not in control.

💬 Mini Whiteboard

If your program works but you don’t understand it, are you a good programmer?

Lets use the Mini-Whiteboard App to answer this

♿